<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			min-height: 400px;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<div class="profile">
		<p><span>姓名:</span> <span id="sname"></span></p>
		<p><span>年龄:</span> <span id="sage"></span></p>
		<p><span>朋友:</span> <span id="sfriend"></span></p>
	</div>
	

<div class="sldiv">
	省<select id="province">
		<option>广西</option>
		<option>广东</option>
	</select>
	市<select id="city">
		<option>柳州市</option>
		<option>南宁市</option>
	</select>
	区<select id="area">
		<option>鱼峰区</option>
		<option>青秀区</option>
	</select>
</div>
	
<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript">
	$.get('data/student.json',function(res){

		$('#sname').text(res.name);
		$('#sage').text(res.age);

		var fname='';
		for(var i=0;i<res.friend.length;i++){

			fname+=res.friend[i].name +" ";
		}

		$('#sfriend').text(fname);
		
	});


	/**把省的信息添加到下拉列框**/
	$.get('data/province.json',function(res){

		$('#province').empty();  //清空html写的省
		for(var i=0;i<res.length;i++){
			var p = res[i];
			var option = '<option value="'+p.id+'">'+p.name+'</option>';
			$('#province').append(option);
		}
	})


	/**把市的信息添加到下拉列框**/
	$.get('data/city.json',function(res){

		$('#city').empty();
		for(var i=0;i<res.length;i++){
			var c = res[i];
			var option = '<option value="'+c.id+'">'+c.name+'</option>';
			$('#city').append(option);
		}
	})


	/**把区的信息添加到下拉列框**/
	$.get('data/area.json',function(res){

		$('#area').empty();
		for(var i=0;i<res.length;i++){
			var a = res[i];
			var option = '<option>'+a.name+'</option>';
			$('#area').append(option);
		}
	})

	$('#city').change(function(){
		 var cid = $(this).val();

		 var tmp= [];	
		 
		 $.get('data/area.json',function(res){
		 	for(var i=0;i<res.length;i++){
		 		if(res[i].pid == cid){
		 			tmp.push(res[i]);
		 		}
		 	}
		 	console.log(tmp);
		 	$('#area').empty();

		for(var j=0;j<tmp.length;j++){
			// var a = res[i];
			var option = '<option value="'+p.id+'">'+tmp[j].name+'</option>';
			$('#area').append(option);
		}
	

		 })	 

	})


	$('#province').change(function(){
		var pid = $(this).val();

		 var tmp= [];	
		 
		 $.get('data/city.json',function(res){
		 	for(var i=0;i<res.length;i++){
		 		if(res[i].pid == pid){
		 			tmp.push(res[i]);
		 		}
		 	}

		 	$('#city').empty();

		for(var j=0;j<tmp.length;j++){
			
			var option = '<option value="'+tmp[j].id+'">'+tmp[j].name+'</option>';
			$('#city').append(option);
		}

		/**过滤县区**/
		$.get('data/area.json',function(res){
			var cid = $('#city').val();
			console.log(cid);

			var  tp = [];
			for(var i=0;i<res.length;i++){
				if(res[i].pid ==cid){
					tp.push(res[i]);
				}
			}

			console.log(tp);
			$('#area').empty();
			for (var j = 0; j < tp.length; j++) {
				var option = '<option value="'+tp[j].id+'">'+tp[j].name+'</option>';
				$('#area').append(option);
			}
		});
	

		 })	 

	})
</script>

</body>
</html>